import React, { useEffect, useState } from 'react'
import { Card, Descriptions,Button } from 'antd';
// Descriptions为antdesign中的描述列表 ，列表的标题是外层组件的title，每一个描述列表的标题是item上的label
//外层组件的column属性代表一行有几个小组件，每个小组件占几份是span属性
//引入请求
import {getHospitalDetailRequest} from '@api/hospital/hospitalList'

//引入类型
import{hospitalDetailType,getHosReturnContType,bookingType}from '@api/hospital/model/hospitalListType'
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalShow() {
    const navigate = useNavigate()
    //因为要通过点击医院列表来跳转到这个页面(id值是在医院列表的路由上)，所以在医院详情要获得id，必须通过路由参数来传
    const{id}=useParams()
    //保存医院详情数据
    const[detail,setDetail]=useState<hospitalDetailType>({})


    //刚加载组件就发送详情数据请求
    useEffect(()=>{
        const getHosDetail = async()=>{
            const result  = await getHospitalDetailRequest(id as string)
            console.log(result)
            setDetail(result)
        }
        getHosDetail()
    },[])



  return (
    <div>
        <Card>
            <Descriptions title="基本信息" bordered column={2}>
                <Descriptions.Item label="医院名称">{(detail.hospital as getHosReturnContType)?.hosname}</Descriptions.Item>
                <Descriptions.Item label="医院logo">{
                    // 因为图片最初也没有数据，所以要写一个三元表达式，如果有数据了就展示图片，没有就为空
                    (detail.hospital as getHosReturnContType)?.logoData?
                    (<img width={100} src={`data:image/png;base64,${(detail.hospital as getHosReturnContType)?.logoData}`} alt="" />):('')
                    
                }</Descriptions.Item>
                {/* 因为最初设置状态时，必须设置一个空对象为列表数据的初始值，所以请求回来的数据类型只能定义为可选的，所以detail中就有可能没有数据，detail.hospital就会为undefined，undefined再.就会报错，所以就要括号包起来写一个问号，这个问号代表可选链，如果前面是undefined就不会执行后面的代码，如果有值才会继续执行 */}
                <Descriptions.Item label="医院编码">{(detail.hospital as getHosReturnContType)?.hoscode}</Descriptions.Item>
                <Descriptions.Item label="医院地址">{(detail.hospital as getHosReturnContType)?.param?.fullAddress}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={2}>{(detail.hospital as getHosReturnContType)?.route}</Descriptions.Item>
                <Descriptions.Item label="医院简介" span={2}>{(detail.hospital as getHosReturnContType)?.intro}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="预约规划信息" bordered style={{marginTop:'30px'}} column={2}>
                <Descriptions.Item label="预约周期">{(detail.bookingRule as bookingType)?.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间">{(detail.bookingRule as bookingType)?.releaseTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间">{(detail.bookingRule as bookingType)?.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间">{(detail.bookingRule as bookingType)?.stopTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={2}>{(detail.bookingRule as bookingType)?.rule.map((item,index)=>{
                                return(
                                    <p key={index}>{index+1}{'.'}{item}</p>
                                )
                })}</Descriptions.Item>
            </Descriptions>
            <Button style={{marginTop:'30px'}} onClick={()=>{navigate('/syt/hosipital/hosipitalList')}}>返回</Button>
        </Card>    
  </div>
  )
}
